<script lang="ts" setup>
import { ref, h, onBeforeMount, nextTick, reactive } from "vue";
import {
  VxeFormPropTypes,
  VxeFormInstance,
  VxeModalInstance,
  VxeFormProps
} from "vxe-pc-ui";
import { ordertypeEdit } from '@/api/config/config'
import {listAgentTax,merchantsgetInfo,contractTypeList,merchantsEdit } from '@/api/project/project'
const emits = defineEmits<{ (e: "reload"): void }>();
const vxeModalRef = ref<VxeModalInstance>();

const modalOptions = reactive<{
  modalValue: boolean;
  modalTitle: string;
  canSubmit: boolean;
}>({
  modalValue: false,
  modalTitle: "",
  canSubmit: true
});

const showModal = (title: string, canSubmit?: boolean): void => {
  modalOptions.modalTitle = title;
  modalOptions.modalValue = true;
  modalOptions.canSubmit = canSubmit ?? true;
};
const defaultFormData = () => {
  return {
    taxSourcesId: '',
    contractType: 0,
    contractSignType: 1,
    id: '',
    timeRang: [],
    contractSignTimeStart: '',
    contractSignTimeEnd: '',
    signByA: '',
    signByMobileA: '',
    signByB: '',
    signByMobileB: '',
    commissionRate: 0,
    contractNumber: '',
    contractTemplateAddressBack: '',
    contractTemplateAddress: '',
    merchantsDealId: ''
  };
};
// 筛选相关
const formRef = ref<VxeFormInstance>();
interface FormDataVO {
  taxSourcesId: string | number;//签约方
  contractType: number;//合同模板
  id: number | string;
  contractSignType: number;//签署方式
  contractSignTimeStart: string;
  contractSignTimeEnd: string;
  timeRang: string[];
  signByA: string;//甲方签署人
  signByMobileA: string;//甲方联系方式
  signByB: string;//乙方签署人
  signByMobileB: string;//乙方联系方式
  commissionRate: number;
  contractNumber: string;
  contractTemplateAddress: null | string;
  contractTemplateAddressBack: null | string;
  merchantsDealId: number | string;
}

const formOptions = reactive<VxeFormProps<FormDataVO>>({
  data: {
    taxSourcesId: '',
    contractType: 0,
    contractSignType: 1,
    id: '',
    timeRang: [],
    contractSignTimeStart: '',
    contractSignTimeEnd: '',
    signByA: '',
    signByMobileA: '',
    signByB: '',
    signByMobileB: '',
    commissionRate: 0,
    contractNumber: '',
    contractTemplateAddressBack: '',
    contractTemplateAddress: '',
    merchantsDealId: ''
  },
  items: [
    {
      field: "taxSourcesId",
      title: "签约方",
      span: 24,
      itemRender: {},
      slots: { default: "taxSourcesId" }
    },
    {
      field: "contractType",
      title: "合同模板",
      span: 24,
      itemRender: {},
      slots: { default: "contractType" }
    },
    {
      field: "contractSignType",
      title: "签署方式",
      span: 24,
      itemRender: {},
      slots: { default: "contractSignType" }
    },
    {
      field: "timeRang",
      title: "合同起始日期",
      span: 24,
      itemRender: {},
      slots: { default: "timeRang" }
    },
    {
      field: "signByA",
      title: "甲方签署人",
      span: 12,
      itemRender: {},
      visible: true,
      visibleMethod: ({ data }) => {
       if(data.contractSignType == 1){
        return true;
       }else{
        return false;
       }
      },
      slots: { default: "signByA" }
    },
    {
      field: "signByMobileA",
      title: "手机号",
      span: 12,
      visible: true,
      visibleMethod: ({ data }) => {
       if(data.contractSignType == 1){
        return true;
       }else{
        return false;
       }
      },
      itemRender: {},
      slots: { default: "signByMobileA" }
    },
    {
      field: "signByB",
      title: "乙方签署人",
      span: 12,
      visible: true,
      visibleMethod: ({ data }) => {
       if(data.contractSignType == 1){
        return true;
       }else{
        return false;
       }
      },
      itemRender: {},
      slots: { default: "signByB" }
    },
    {
      field: "signByMobileB",
      title: "手机号",
      span: 12,
      visible: true,
      visibleMethod: ({ data }) => {
       if(data.contractSignType == 1){
        return true;
       }else{
        return false;
       }
      },
      itemRender: {},
      slots: { default: "signByMobileB" }
    }
  ]
});
const formRules = ref<VxeFormPropTypes.Rules>({
  taxSourcesId: [{ required: true, message: "请选择签约方",trigger: 'change' }],
  contractType: [{ required: true, message: "请选择合同模板",trigger: 'change' }],
  contractSignType: [{ required: true, message: "请选择签署方式",trigger: 'change' }],
  timeRang: [{ required: true, message: "请选择合同起始日期",trigger: 'change' }],
  signByA: [{ required: true, message: "请输入甲方签署人",trigger: 'change' }],
  signByMobileA: [{ required: true, message: "请输入手机号",trigger: 'change' }],
  signByB: [{ required: true, message: "请输入乙方签署人",trigger: 'change' }],
  signByMobileB: [{ required: true, message: "请输入手机号",trigger: 'change' }],
});

const showAddModal = () => {
  showModal(`新增模板`);
  formOptions.data = defaultFormData();
  nextTick(() => {
    formRef.value.clearValidate();
  });
};
const showEditModal = (record: Recordable) => {
  showModal(`编辑合同`);
  nextTick(() => {
    formRef.value.clearValidate();
    merchantsgetInfo(record.id).then((res:any) => {
      for (let key in formOptions.data) {
        if(res.data[key] === undefined || res.data[key] === null ){

        } else {
          formOptions.data[key] = res.data[key]
        }
      }
      formOptions.data.timeRang = [res.data.contractSignTimeStart,res.data.contractSignTimeEnd]
      // formOptions.data = res?.data;
    })
    
  });
};
const handleSubmit = async () => {
  const validate = await formRef.value.validate();
  if (!validate) {
    merchantsEdit(formOptions.data).then(() => {
      modalOptions.modalValue = false;
      emits("reload");
    })
  }
};

const allList = ref<any[]>()
const getalllist = ()=>{
  listAgentTax({whetherAgentEffect: 1}).then(res=>{
    allList.value = res?.data?.rows;
  })
}

// 合同分类列表
const typelist = ref<any[]>()
const gettypelist = () => {
  contractTypeList().then((res:any) => {
    typelist.value = res.data;
  })
}
onBeforeMount(() => {
  getalllist();
  gettypelist();
});
defineExpose({ showAddModal,showEditModal });
</script>
<template>
  <vxe-modal
    ref="vxeModalRef"
    v-model="modalOptions.modalValue"
    width="800"
    showFooter
    :title="modalOptions.modalTitle"
  >
    <template #default>
      <vxe-form
        ref="formRef"
        :titleWidth="120"
        :titleAlign="`right`"
        :rules="formRules"
        v-bind="formOptions"
      >
        <template #taxSourcesId="{ data }">
          <el-select
            clearable
            placeholder="请选择签约方"
            v-model="data.taxSourcesId"
          >
            <el-option
              v-for="(item, index) in allList"
              :key="index"
              :label="item.taxSourcesName"
              :value="item.taxSourcesId"
            ></el-option>
          </el-select>
        </template>
        <template #contractType="{ data }">
          <el-radio-group v-model="data.contractType">
            <el-radio v-for="(item,index) in typelist" :key="index" :value="item.code">{{item.desc}}</el-radio>
          </el-radio-group>
        </template>
        <template #contractSignType="{ data }">
          <el-radio-group v-model="data.contractSignType">
            <el-radio :value="1">电子签署</el-radio>
            <el-radio :value="2">线下签署</el-radio>
          </el-radio-group>
        </template>
        <template #timeRang="{ data }">
          <el-date-picker
            clearable
            style="width: 100%"
            v-model="data.timeRang"
            type="daterange"
            range-separator="-"
            value-format="YYYY-MM-DD"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </template>
        
        <template #signByA="{ data }">
          <el-input v-model="data.signByA" clearable placeholder="请输入甲方签署人" />
        </template>
        <template #signByMobileA="{ data }">
          <el-input v-model="data.signByMobileA" clearable placeholder="请输入手机号" />
        </template>
        <template #signByB="{ data }">
          <el-input v-model="data.signByB" clearable placeholder="请输入乙方签署人" />
        </template>
        <template #signByMobileB="{ data }">
          <el-input v-model="data.signByMobileB" clearable placeholder="请输入手机号" />
        </template>
        <template #templateState="{ data }">
          <el-switch v-model="data.templateState" :active-value="1" :inactive-value="2"></el-switch>
        </template>
        
      </vxe-form>
    </template>
    <template #footer>
      <vxe-button content="关闭" @click="modalOptions.modalValue = false" />
      <vxe-button
        v-if="modalOptions.canSubmit"
        status="primary"
        content="确定"
        @click="handleSubmit"
      />
    </template>
  </vxe-modal>
</template>
<style>
.img_one{
  position: relative;
}
.icon-check{
  position: absolute;
  width: 100%;height: 100%;
  left: 0;
  top: 0;
  line-height: 48px;
  text-align: center;
}



.avatar-uploader .el-upload {
  border: 1px dashed #eee;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: #eee;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
}
</style>